<template>
  <div class="map-selector">
    <h2>请选择地址</h2>

    <div class="address-list">
      <div
          v-for="(addr, index) in mockAddresses"
          :key="index"
          class="address-item"
          @click="selectAddress(addr)"
      >
        {{ addr }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapSelector',
  data() {
    return {
      mockAddresses: [
        '北京市朝阳区建国路87号',
        '上海市浦东新区世纪大道100号',
        '广州市天河区珠江新城华夏路28号'
      ]
    };
  },
  methods: {
    selectAddress(address) {
      this.$router.push({ name: 'MedicalClinicForm', query: { address } }); // 返回并附带选中地址
    }
  }
};
</script>

<style scoped>
.map-selector {
  padding: 20px;
  background-color: #f9f9f9;
}

.address-list {
  margin-top: 20px;
}

.address-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s ease;
}

.address-item:hover {
  background-color: #f0f8ff;
}
</style>